<template>
  <div class="wrap">
    <div class="title">
      <Checkbox v-model="item.selected" @on-change="shopSelect"> {{getShopName}}</Checkbox>
    </div>
      <Row class="item-box" v-for="(goods,i) in item.goodres" :key="`cartItem-${i}`">
          <Col class="item-box-cli" span="2">
             <Checkbox v-model="goods.selected" ></Checkbox>
            </Col>
          <Col class="item-box-cli" span="8" >
            <img class="item-cover" :src="goods.thumb_url" @click="$utils.goGoodsDeatil(goods.goods_id)"/>
            <div class="item-box-cli-right" @click="$utils.goGoodsDeatil(goods.goods_id)">
              <h2 class="item-productName">{{goods.goods_name}}</h2>
             <p class="item-productDesc">{{item.goods_attr_str}}</p>
            </div>
          </Col>
          <Col  class="item-box-cli"  span="4">
            {{'¥'+goods.shop_price}}
          </Col>
          <Col  class="item-box-cli"  span="4">
            <InputNumber v-model="goods.num" :min="1" controls-outside @on-change="(e)=>cartNumChange(e,goods.id)"></InputNumber>
          </Col>
          <Col class="item-box-cli"  span="3">
            {{'¥'+goods.shop_price*goods.num}}
          </Col>
          <Col class="item-box-cli"  span="2" title="删除" >
            <div @click="deleteCart(goods.id)">
              <delete-three theme="outline" size="24" fill="#d6d6d6"/>
            </div>
          </Col>
      </Row>
  </div>
</template>

<script>
  import {DeleteThree} from "@icon-park/vue"
import { mapState,mapMutations } from 'vuex'
export default {
  name:'CartItem',
  data(){
    return {
      quantity:0
    }
  },
  components:{
    DeleteThree
  },
  created(){
   this.quantity = this.item.quantity
  },
  computed:{
    ...mapState(['cartList']),
    getShopName(){
      const { goodres =[]} = this.item
      return goodres[0] && goodres[0]['shop_name']
    },
    getAllGoodsSelected(){
      const { goodres =[]} = this.item
      return goodres.map(res=>res.selected).every(e=>e)
    }
  },
  props:{
    item:{
      type:Object,
      default:()=>{},
      required:true,
    },
    shopIndex:{
      type:Number,
      default: 0,
      required:true,
    }
  },
  watch:{
    "item.selected":{
      handler: function(value){
          this.shopSelect(value, 'shopSelect')
      }
    },
    "getAllGoodsSelected":function(value){
      const {cartList,shopIndex} = this
      cartList[shopIndex].selected = value
    }
  },
  created(){
    console.log(this.item)
  },
  methods:{
    ...mapMutations(['ADD_SHOPPING_CART']),
    deleteCart(id){
     this.$emit('deleteCart',id)
    },
    cartNumChange(num,cart_id){
      this.$emit('cartNumChange',{num,cart_id})
    },
    shopSelect(selected,type){
      const {cartList,shopIndex} = this
        cartList[shopIndex] &&  cartList[shopIndex]['goodres'].forEach(res=>{
          res.selected= selected
          return res
         })
         this.ADD_SHOPPING_CART(cartList)
    }
  }

}
</script>

<style lang="scss" scoped>
  @import "@/common/style/common.scss";
  .flex{
    @include flex();
    flex-wrap: nowrap;
  }
.wrap{
  font-size: 16px;
  color:#333
}
.title{
  padding:20px;
  border-bottom: 1px solid #eee;
  margin-top: 15px;
}
.item{
  &-box{
    padding:20px;
    background-color: #fff;
    &-cli{
      @include flex();
      flex-wrap: nowrap;
      cursor: pointer;
      &-right{
        padding:0 20px 0 8px;
      }
    }
  }
  &-cover{
    width: 80px;
    height: 80px;
    border-radius: 4px;
  }
  &-productName{
    font-size: 14px;
    color:#333
  }
  &-productDesc{
    font-size: 12px;
    color:#666
  }
}


</style>
